<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>成本速算</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    <div style="font-size: 14px; margin-bottom: 5px;">
      <span style="display: inline-block; width: 130px;">每日平均直播收益：</span>
      <input type="number" v-model="dailyIncome">
    </div>
    <div style="font-size: 14px; margin-bottom: 5px;">
      <span style="display: inline-block; width: 130px;">单品成本价格：</span>
      <input type="number" v-model="goodsPrice">
    </div>
    <div style="font-size: 14px; margin-bottom: 5px;">
      <span style="display: inline-block; width: 130px;">单品售卖价格：</span>
      <input type="number" v-model="goodsSellPrice">
    </div>
    <div style="font-size: 14px; margin-bottom: 5px;">
      <span style="display: inline-block; width: 130px;">达人佣金百分比：</span>
      <input type="number" v-model="anchorCommissionPercentage">
    </div>
    <div style="font-size: 14px; margin-bottom: 5px;">
      <span style="display: inline-block; width: 130px;">渠道佣金百分比：</span>
      <input type="number" v-model="channelCommissionPercentage">
    </div>
    <div style="font-size: 14px; margin-bottom: 5px;">
      <span style="display: inline-block; width: 130px;">运费百分比：</span>
      <input type="number" v-model="carriagePercentage">
    </div>
    <pre style="font-size: 12px; max-width: 320px; padding: 10px; background-color: #eee;">{{result}}</pre>
  </div>
</body>
<script>
  /**
 *
 * @param dailyIncome 每日平均直播收益（不计平台抽成，算上平台抽成的话，应该更少）
 * @param goodsPrice 单品成本价格
 * @param goodsSellPrice 单品售卖价格
 * @param anchorCommissionPercentage 达人佣金百分比
 * @param channelCommissionPercentage 渠道佣金百分比
 * @param carriagePercentage 运费百分比
 */
function getRealIncome(
  dailyIncome = 100000,
  goodsPrice = 69,
  goodsSellPrice = 188,
  anchorCommissionPercentage = 30,
  channelCommissionPercentage = 5,
  carriagePercentage = 3
) {
  // 周期
  const dayCount = 7;
  // 达人出场费
  const anchorCost = 2000 * dayCount;
  // 投流费用
  const flowCost = 1500 * dayCount;
  // 达人服务费
  const cost = anchorCost + flowCost;

  // 利润百分比
  const gainPercentage = Number((((goodsSellPrice - goodsPrice) / goodsSellPrice) * 100).toFixed(2));
  // 纯利润百分比
  const profitPercentage = gainPercentage - anchorCommissionPercentage - channelCommissionPercentage - carriagePercentage;

  // 直播收益（不计平台抽成，算上平台抽成的话，应该更少）
  const income = dailyIncome * dayCount;

  // 纯利润收益
  const gain = (income * gainPercentage) / 100;
  // 达人佣金
  const anchorCommission = (income * anchorCommissionPercentage) / 100;
  // 渠道佣金
  const channelCommission = (income * channelCommissionPercentage) / 100;
  // 运费支出
  const carriage = (income * carriagePercentage) / 100;

  // 甲方实际收益
  const realIncome = (income * profitPercentage) / 100 - cost;
  // 出货量
  const goodsCount = income / goodsSellPrice;
  // 每日平均出货量
  const dailyGoodsCount = goodsCount / dayCount;

  let result = '《未扣除平台抽成》';

  result +=`\n${dayCount}天达人出场费:` + anchorCost + '元';
  result +=`\n${dayCount}天投流费用:` + flowCost + '元';
  result +=`\n${dayCount}天合计达人服务费:` + cost + '元';
  result +='\n-----------------------------------------';

  result +='\n每日平均出货量:' + Math.ceil(dailyGoodsCount) + '件';
  result +='\n每日平均直播收益:' + dailyIncome + '元';
  result +='\n-----------------------------------------';

  result +=`\n${dayCount}天总出货量:` + Number(goodsCount.toFixed(0)) + '件';
  result +=`\n${dayCount}天直播收益:` + income + '元';
  result +='\n-----------------------------------------';

  result +='\n利润百分比:' + gainPercentage + '%';
  result +=`\n${dayCount}天利润收入:` + gain + '元';
  result +='\n-----------------------------------------';

  result +='\n达人佣金百分比:' + anchorCommissionPercentage + '%';
  result +=`\n${dayCount}天达人佣金支出:` + anchorCommission + '元';
  result +='\n-----------------------------------------';

  result +='\n渠道佣金百分比:' + channelCommissionPercentage + '%';
  result +=`\n${dayCount}天渠道佣金支出:` + channelCommission + '元';
  result +='\n-----------------------------------------';

  result +='\n运费百分比:' + carriagePercentage + '%';
  result +=`\n${dayCount}天运费支出:` + carriage + '元';
  result +='\n-----------------------------------------';

  result +=`\n${dayCount}天甲方实际收益:` + Number(realIncome.toFixed(0)) + '元';
  return result;
}

getRealIncome(20000, 69, 188);

  var app = new Vue({
    el: '#app',
    data: {
      dailyIncome: 20000,
      goodsPrice: 69,
      goodsSellPrice: 188,
      anchorCommissionPercentage: 30,
      channelCommissionPercentage: 5,
      carriagePercentage: 3
    },
    computed: {
      result() {
        return getRealIncome(this.dailyIncome, this.goodsPrice, this.goodsSellPrice, this.anchorCommissionPercentage, this.channelCommissionPercentage, this.carriagePercentage);
      },
    },
  });
</script>
</html>
